<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="800px"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="content">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="成员" prop="userId">
          <el-select v-model="ruleForm.userId" placeholder="请选择成员" style="width: 600px">
            <el-option v-for="item in cProHeadOption" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roleId">
          <el-select v-model="ruleForm.roleId" placeholder="未设置" style="width: 600px">
            <el-option
              v-for="item in rolesList"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成员分类" prop="postId">
          <el-select v-model="ruleForm.postId" placeholder="未设置" style="width: 600px">
            <el-option
              v-for="item in memberList"
              :key="item.postId"
              :label="item.postName"
              :value="item.postId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="done">完成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {mixin} from "@/views/projectManage/mixin";
import {addUser, emitUser, postList, roleList} from "@/api/projectManage/membership";

export default {
  name: "addUser",
  mixins: [mixin],
  data() {
    return {
      dialogVisible: false,
      ruleForm: {},
      rules: {
        userId: [
          { required: true, message: '请选择成员', trigger: 'change' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ],
        postId: [
          { required: true, message: '请选择成员分类', trigger: 'change' }
        ],
        dataScope: [
          { required: true, message: '请选择权限', trigger: 'change' }
        ],
      },
      rolesList: [],
      dataScopeList: [
        {
          label: '全部',
          value: '1'
        },
        {
          label: '其他',
          value: '2'
        }
      ],
      title: ''
    }
  },
  methods: {
    open(row) {
      this.getRoleList()
      this.getPostList()
      this.getMember()
      this.getPostList()
      this.dialogVisible = true
      if (row) {
        console.log(row)
        this.ruleForm = JSON.parse(JSON.stringify(row))
        this.title = '修改成员'
        return
      }
      this.title = '添加成员'
    },
    getRoleList() {
      this.rolesList = []
      roleList().then(res => {
        if (res.rows.length) {
          res.rows.forEach((i, z) => {
            if (i) {
              this.rolesList.push(
                {
                  id: i.roleId,
                  label: i.roleName,
                },
              )
            }
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.ruleForm = {}
      this.$refs['ruleForm'].resetFields();
    },
    done() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          // this.title === '添加成员' ?
          // addUser({
          //   ...this.ruleForm,
          //   cProNo: this.projectInfo.cProNo,
          //   userIds: this.ruleForm.userId
          // }).then(res => {
          //   this.$notify({title: '成功', message: '添加成功！', type: 'success',});
          // }) : emitUser({
          //     ...this.ruleForm,
          //     cProNo: this.projectInfo.cProNo,
          //     userIds: this.ruleForm.userId
          //   }).then(res => {
          //   this.$notify({title: '成功', message: '修改成功！', type: 'success',});
          // })
          addUser({
            ...this.ruleForm,
            cProNo: this.projectInfo.cProNo,
            userIds: this.ruleForm.userId
          }).then(res => {
            this.$notify({title: '成功', message: '添加成功！', type: 'success',});
          })

          this.$emit('upDate')
          this.handleClose()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 20px;
}
.inputNumber {
  width: 300px;
}
</style>
